<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .myMenu{
             width: 150px;
             height: 300px;
             border:1px #ccc solid;
             border-radius: 2px;
             box-shadow: 1px 1px #ccc 2px;
             display: none;
             position: absolute;

         }

    </style>
</head>
<body>

      <div class='myMenu'>
          <ul>
              <li><a href="https://wwww.baidu.com">百度一下</a></li>
              <li><a href="../homework/one.html">one.html</a></li>
              <li><a href="../homework/two.html">two.html</a></li>
              <li><a href="#">菜单4</a></li>
          </ul>

      </div>
    
</body>
</html>
<script>

let divObj = document.querySelector('.myMenu');

//触发菜单事件
document.oncontextmenu=(e)=>{
    console.log('1111');
    //取消默认行为
    return false;
    
   let  eventObj = window.event||e;

   let cx = eventObj.clientX;
   let cy = eventObj.clientY;

   divObj.style.display='block';
   divObj.style.left=cx+'px';
   divObj.style.top=cy+'px;';





}


</script>
